import store from '@/store/index'
let clickFn = null
const directive = {
  imgerror: {
    inserted(dom, obj, vnode) {
      // 只执行一次
      // 如果有值就是用该值,没有就使用默认的
      obj.value = obj.value || require('@/assets/common/bigUserHeader.png')
      // 如果有图片的src就使用它的src,如果没有就使用默认的
      dom.src = dom.src || obj.value
      dom.onerror = () => {
        // 如果图片出错了就使用默认的图片
        dom.src = obj.value
      }
    },
    // 更新平时一定要带上
    componentUpdated(dom, obj) {
      obj.value = obj.value || require('@/assets/common/bigUserHeader.png')
      dom.src = dom.src || obj.value
    },
    unbind(dom) {
      dom.onerror = null
    }
  },
  // 点击dom外区域触发相应事件
  clickOut: {
    inserted(dom, obj, vnode) {
      clickFn = (e) => {
        // dom 是否包含 e.target
        if (!dom.contains(e.target)) {
          obj.value()
        }
      }
      document.addEventListener('click', clickFn)
    },
    unbind(dom, obj, vnode) {
      document.removeEventListener('click', clickFn)
    }
  },
  // 按钮权限控制
  btnControl: {
    inserted(dom, obj) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      } else {
        dom.style.display = obj.modifiers.inlineBlock ? 'inline-block' : 'block'
      }
    },
    componentUpdated(dom, obj) {}
  }
}

export default {
  install(Vue) {
    Object.keys(directive).forEach((item) => {
      Vue.directive(item, directive[item])
    })
  }
}
